<template>
	   <div>
			<div id="data">
				<p>
					<span id="prevnain" @click="prevnain">上一年</span>
					<span id="prev" @click="prev">上一月</span>
					<span id="nian">{{nian}}年{{arr[yue]}}{{tian}}日</span>
					<span id="next" @click="next">下一月</span>
					<span id="nextnian" @click="nextnian">下一年</span>
				</p>
				<ul id="title">
					<li>日</li>
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li>六</li>
				</ul>
				<ul id="date" :title="mom.length">
						<li 
							v-for="(idata,ind) in mom" :key="ind" :title="idata"
							:class="[onebtn(idata,ind)]"
							@click="clickdate(idata,ind)"
						>{{oneclass(idata,ind)}}</li>
				</ul>
			</div>
			    
		 </div>
</template>

<script>
import {mapGetters,mapState, mapMutations, mapActions} from 'vuex'

export default {
	name:"datas",
	props:{
		  alldatas:{
				type: String,
				default: ""
			}
	},
	data(){
		return{
			dat:"",
			nianD:"",
			tian:"",
			yueD:"",
			tianD:"",
			nian:"",
			yue:"",
			textdom:"",
			mom:[],
			ends:[],
			star:[],
			arr:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
		}
	},
	created () {
	
	},
	mounted() {
		//添加数据
		this.alldatas&&this.judges(this.alldatas)
		//初始化时间
		this.Initialization(this.alldatas)
		this.add()
	},
	methods: {
		add() {
				var nian = this.dat.getFullYear();//当前年份
				var yue = this.dat.getMonth(); //当前月
				var tian = this.dat.getDate(); //当前天
						this.nian=nian,
						this.yue=yue,
						this.tian=tian
				//把时间设为下个月的1号 然后天数减去1 就可以得到 当前月的最后一天; ${setDat}+"最后一天"+
				var setDat = new Date(nian,yue + 1,1 - 1); 
				var setTian = setDat.getDate(); //获取 当前月最后一天
				var setZhou = new Date(nian,yue,1).getDay(); //获取当前月第一天 是 周几
				console.log(setDat,setTian,setZhou)
				this.textdom=`${setTian}+"最后一天"+${setZhou}+"周几"`
				let sque=[];//渲染空白 与 星期 对应上
				for(var i=0;i<setZhou ;i++){sque.push(i)}
				this.ends=sque
				let sall=[];//利用获取到的当月最后一天 把  前边的 天数 都循环 出来
				for(var i=1;i<=setTian;i++){sall.push(i)}
				this.star=sall
				this.mom=[...sque,...sall]
		},
		prev(){
			this.dat.setMonth(this.dat.getMonth() - 1); //当点击下一个月时 对当前月进行加1;
			this.add(); //重新执行渲染 获取去 改变后的  年月日  进行渲染;
		},
		next(){
			this.dat.setMonth(this.dat.getMonth() + 1); //当点击下一个月时 对当前月进行加1;
			this.add(); //重新执行渲染 获取去 改变后的  年月日  进行渲染;
		},
		prevnain(){
			this.dat.setMonth(this.dat.getMonth() - (11+this.yue+1)); //当点击下一个月时 对当前月进行加1;
			let cv=this.dat.setDate(1)
			this.add();  //重新执行渲染 获取去 改变后的  年月日  进行渲染;
		},
		nextnian(){
			this.dat.setMonth(this.dat.getMonth() + (11-this.yue+1)); //当点击下一个月时 对当前月进行加1;
			let cv=this.dat.setDate(1)
			this.add(); //重新执行渲染 获取去 改变后的  年月日  进行渲染;
		},
		clickdate(idata,ind){
			let cv=this.dat.setDate(idata)
			this.tianD=idata
			this.yueD =this.yue
			this.add(); //重
			let dom=this.nian+"年"+(this.yue+1)+"月"+this.tian+"日"
			this.$emit('somDate',dom)
		},
		Initialization(){
			this.alldatas?this.dat:(this.dat = new Date())//当前时间
			this.nianD = this.dat.getFullYear(); //当前年份
			this.yueD = this.dat.getMonth(); //当前月
			this.tianD = this.dat.getDate();//当前天    这保存的年月日 是为了 当到达当前日期 有对比
		},
		//判断是否传值
		judges(alldatas){
			let longnian="";
			let longyue="";
			let longri="";
			let reg =/[\u4e00-\u9fa5]/g;
			let comm=alldatas
			let tm=comm.split(reg)
			tm.pop();
			longnian=tm[0].length==4?tm[0]:1978
			longyue=tm[1].length==2?tm[1]:"0"+tm[1]
			longri=tm[2].length==2?tm[2]:"0"+tm[2]
			this.dat=new Date(longnian,longyue-1,longri)
		},
		oneclass(idata,ind){
			return	(ind>=this.ends.length)?idata:""
		},
		onebtn(idata,ind){
			return  this.nian == this.nianD && this.yue == this.yueD && idata== this.tianD?
			 "active":"hover"
		}
	},
	computed:{
	
	},
	watch:{
		
	},
	components:{
		
  }
	
}

</script>

<style  scoped >
	* {
		margin: 0px;
		padding: 0px;
	}
	
	#data {
		width: 280px;
		border: 1px solid #000000;
		margin: 20px auto;
	}
	
	#data>p {
		display: flex;
		color: #fff;
	}
	
	#yue{
		color: #fff;
	}
	
	#data>h5 {
		text-align: center;
	}
	
	#data>p>span {
		display: block;
		height: 30px;
		line-height: 30px;
	}
	
	#prev,
	#next {
		cursor: pointer;
	}
	
	#nian {
		flex: 1;
		text-align: center;
	}
	
	#title {
		overflow: hidden;
		list-style: none;
		background: #ccc;
	}
	
	#title>li {
		float: left;
		width: 40px;
		height: 26px;
		line-height: 26px;
		text-align: center;
	}
	
	#date {
		overflow: hidden;
		list-style: none;
	}
	
	#date>li {
		float: left;
		width: 34px;
		height: 34px;
		margin: 1px 1px;
		border: 2px solid rgba(0, 0, 0, 0);
		line-height: 34px;
		text-align: center;
		cursor: pointer;
	}
	
	#date>.hover:hover {
		border: 2px solid red;
	}
	
	.active {
		color: red;
	}

</style>

